<template>
  <!-- <div id="app">
          <div class="shop" v-for="(shop, index) in shuzu" :key="index">
              <p>{{shop.restaurant.name}}</p>
              <p>{{shop.restaurant.address}}</p>
              <img :src="shop.restaurant.image_path" alt="">
          </div>
          
      </div> -->
  <div id="leibiao">
    <ul>
      <li class="ll" v-for="(item, index) in shuzu" :key="index">
        <div class="d1">
          <div class="dd1">
            <div class="ddd1">
              <img class="dddimg" :src="item.restaurant.image_path" alt="">
            </div>
          </div>
          <div class="dd2">
            <h3 class="dv1">{{item.restaurant.name}}</h3>
            <div class="dv2"><span class="iconfont ico">&#xe616;&#xe616;&#xe616;&#xe616;&#xe616;</span> <span>{{item.restaurant.rating}}</span><span> 月销{{item.restaurant.recent_order_num}}单</span></div>
            <div class="dv3"><span>¥{{item.restaurant.float_minimum_order_amount}}元起送</span> | <span>配送费{{item.restaurant.float_delivery_fee}}元</span></div>
          </div>
        </div>
        <div class="d2">
          <div v-show="!item.restaurant.recommend.is_ad" class="d2_dv1"><img class="d_img" :src="item.restaurant.recommend.image_hash" alt="">{{item.restaurant.recommend.reason}}</div>
          <div class="d2_dv2"><span class="sp1"><span class="sp2">{{item.restaurant.activities[0].icon_name}}</span></span><span>{{item.restaurant.activities[0].description}}</span></div>
          <div class="d2_dv3"><span class="sp4"><span class="sp5" :class="{sp6:item.restaurant.activities[1].type==106}">{{item.restaurant.activities[1].icon_name}}</span></span><span class="dv3_dv">{{item.restaurant.activities[1].description}}</span></div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Footer",
  /* 工程名 */
  data() {
    return {
      shuzu: []
    };
  },
  created() {
    this.gitCity();
  },
  methods: {
    gitCity() {
      axios
        .get("/api/shops3.json")
        .then(res => {
          console.log("打印数组：", res);
          res.data.items.forEach(ele => {
            let element = ele.restaurant;
            // 正则判断
            let reg = RegExp(/png/);
            let suffix = "jpeg";
            if (reg.test(element.image_path)) {
              suffix = "png";
            }
            let imgpath = `${element.image_path.slice(
              0,
              1
            )}/${element.image_path.slice(1, 3)}/${element.image_path.slice(
              3
            )}`;
            element.image_path = `http://fuss10.elemecdn.com/${imgpath}.${suffix}?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/`;
          });
          this.shuzu = res.data.items;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
.ll 
  display: block;
  position: relative;
  border-bottom: 0.133333vw solid #eee;
  background-color: #fff;
  color: #666;
  padding: 4vw 0;
  list-style: none;
  font-size: 0.293333rem;
  line-height: normal;

  .d1 
    display: flex;
    padding: 0 2.666667vw;

    .dd1 
      position: relative;
      flex: none;

      .ddd1 
        position: relative;
        width: 17.333333vw;
        height: 17.333333vw;

        .dddimg 
          box-sizing: border-box;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 0.533333vw;
          border: 0.133333vw solid rgba(0, 0, 0, 0.08);
       

    .dd2 
      padding-left: 2.67vw;

      .dv1 
        display: flex;
        margin-bottom: 0.4vw;
        padding: 0;
        color: #333;
        font-weight: 700;
        font-size: 0.4rem;
        overflow: hidden;
      

      .dv2 
        margin-bottom: 0.8vw;

        .ico 
          color: #ffb712;
       

  .d2 
    padding-left: 22.666667vw;

    .d2_dv1 
      display: flex;
      margin: 2.666667vw 2.666667vw 0 0;
      color: #f00;
      font-size: 0.266667rem;

      .d_img 
        height: 2.666667vw;
        margin-top: 0.4vw;
        margin-right: 0.8vw;

    .d2_dv2 
      .sp1 
        height: 3.733333vw;
        width: 3.733333vw;
        margin-right: 1.6vw;
        display: inline-block;
        position: relative;
        vertical-align: middle;

        .sp2 
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          height: 0.35rem;
          width: 0.4rem;
          color: #fff;
          font-size: 0.3rem;
          background-color: #0f0;
          background-color: rgb(112, 188, 70);
          text-align: center;
          line-height: 0.35rem;

    .d2_dv3 
      font-size: 0.293333rem;
      line-height: 4.8vw;
      margin-top: 0.667vw;

      .sp4 
        height: 3.733333vw;
        width: 3.733333vw;
        margin-right: 1.6vw;
        display: inline-block;
        position: relative;
        vertical-align: middle;

        .sp5 
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          height: 0.35rem;
          width: 0.4rem;
          color: #fff;
          font-size: 0.3rem;
          background-color: #0f0;
          background-color: rgb(240, 115, 115);
          text-align: center;
          line-height: 0.35rem;

        .sp6 
          background-color: rgb(60, 199, 145);

</style>
